<template>
  <div>
    <!-- 菜单组件 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 子菜单：用户管理 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>学生管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="11" @click="navUser">增加学生</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="12" @click="navPwd">查看学生</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 子菜单：商品管理 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>教师管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="21">任命管理</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="22" @click="navTeacher">查看教师</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 子菜单：订单管理 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>班级管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="31">学生分班</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="32" @click="navClass">查看班级</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 子菜单：会员管理 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>课程管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="41">增加课程</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="42" @click="navCourse">查看课程</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>排课管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="51">进行排课</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <el-menu-item index="52">排课信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>续费管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="61">续费信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    navUser() {
      this.$router.push("/dashboard/admin");
    },
    navPwd() {
      this.$router.push("/dashboard/pwdReset");
    },
    navCourse() {
      this.$router.push("/dashboard/course");
    },
    navTeacher() {
      this.$router.push("/dashboard/teacher");
    },
    navClass() {
      this.$router.push("/dashboard/class");
    }
  }
};
</script>

<style scoped></style>
